<template>
  <view class="item-container wrap">
    <!-- 内容区 -->
    <view class="context">
      <!-- 上层盒子 -->
      <view class="box-item mar">
        <view class="item1-left">
          <view class="job">{{infoItem.jobName}}</view>
          <img src="../../static/img/组件 351 – 2.png" alt="" />
        </view>
        <view class="salary">{{infoItem.wageMax}}</view>
      </view>
      <!-- 中间 -->
      <view class="box-item mar">
        <view class="item2-left">
          <view>{{infoItem.enterpriseName}}</view>
          <view class="admit">已认证</view>
        </view>
        <view>20人以下</view>
      </view>
      <!-- 下层 -->
      <view class="box-item">
        <view>{{infoItem.cityName}}-{{infoItem.areaName}}-{{infoItem.address}}</view>
        <button>沟通</button>
      </view>
    </view>
  </view>
</template>


<script >
export default {
  name: "",
  props:['infoItem'],
  data() {
    return {};
  },
};
</script>


<style  scoped>
@import url("../../style/common.css");
/* 大容器 */
.item-container {
  width: 100%;
}
.context {
  background-color: #fff;
  padding: 20rpx 20rpx 20rpx 20rpx;
}
/* 每一个盒子样式 */
.box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mar {
  margin-bottom: 20rpx;
}
/* 第一个盒子的样式 */
.item1-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}
.salary {
  color: red;
  font-weight: 600;
}
/* 第二个盒子样式 */
.item2-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.admit {
  border: 1px solid #ffd700;
  color: #ffd700;
  font-size: 10px;
  margin-left: 10px;
}
/* 图片 */
img {
  width: 30rpx;
  height: 30rpx;
  margin-left: 30rpx;
}
/* 按钮 */
button {
  width: 200rpx;
  border: 1px solid lightskyblue;
  color: lightskyblue;
  font-size: 16px;
  padding: 0;
  margin: 0;
  background-color: #fff;
}
</style>
